<template>
  <div>
    <headerTopNav v-bind:activeIndex="activeIndex"></headerTopNav>
    <div>
      <el-row type="flex"  justify="center">
      <el-col :span="9" class="personal_info">
        <el-row sty>
          <el-col :span="6" class="my_avatar">
            <img :src="imageUrl+userInfo.avatar" alt="" v-if="userInfo">
          </el-col>
          <el-col :span="18" class="my_avatar">
            <div class="my_nickName"><i class="iconfont icon-jiangpai" style="font-size: 30px;color: #f1da7f;margin-top: -2px;font-weight: lighter" v-if="userInfo.isFamous==1"></i>{{userInfo.nickname}}</div>
            <div style="float: right">
              <i class="iconfont icon-weixin contact-way"></i>
              <i class="iconfont icon-github contact-way"></i>
              <i class="iconfont icon-QQ contact-way"></i>
            </div>
            <div class="my_description" style="margin:20px 0 0 20px">{{userInfo.description}}</div>
            <el-button type="success" round style="float: right;margin-top: 60px" @click="toModifyInfo(userId)">编辑个人资料</el-button>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="5" class="personal_info" style="margin-left: 30px;padding-top:20px">
        <el-row type="flex"  justify="center">
          <el-col :span="8" class="right_info_box">
            <div @click="activeName='sixth'">
              <h4>粉丝数</h4>
              <span>{{userInfo.fanCount}}</span>
            </div>
          </el-col>
          <el-col :span="8" class="right_info_box" style="margin-left: 20px">
            <div @click="activeName='fifth'">
              <h4>关注数</h4>
              <span >{{userInfo.followCount}}</span>
            </div>

          </el-col>
          <el-col :span="8" class="right_info_box" style="margin-left: 20px">
            <div>
              <h4>等级</h4>
              <span style="color: red">LV6</span>
            </div>
          </el-col>
        </el-row >
        <el-row type="flex"  justify="center" style="margin-top: 40px">
          <el-col :span="12" class="right_info_box1">
            <span @click="toPublishArticle">发布文章</span>
          </el-col>
          <el-col :span="12" class="right_info_box1" style="margin-left: 30px">
            <span v-if="userInfo.isFamous==0" style="color:rgba(239,156,180,0.78);" @click="modifyIsFamous">申请认证</span>
            <span v-if="userInfo.isFamous==2" t style="color:#68fde7;">已申请</span>
            <span v-if="userInfo.isFamous==1" style="color: greenyellow">已认证</span>
          </el-col>
        </el-row>

      </el-col>
    </el-row>
    </div>
    <div>
        <el-row type="flex"  justify="center" >
          <el-col :span="9">
              <el-tabs v-model="activeName" @tab-click="handleClick" style="padding:10px 20px 10px 10px">
                <el-tab-pane label="我的文章" name="first" style="border: 1px solid lightgray;border-radius: 4px">
                  <!--我的文章列表-->
                  <myArticles v-bind:userId="userInfo.id"></myArticles>
                </el-tab-pane>
<!--                <el-tab-pane label="我的标签" name="second" style="border: 1px solid lightgray;border-radius: 4px">-->
<!--                  &lt;!&ndash;我的标签列表&ndash;&gt;-->
<!--                  <myTags></myTags>-->
<!--                </el-tab-pane>-->
                <el-tab-pane label="浏览历史" name="third" style="border: 1px solid lightgray;border-radius: 4px">
                  <view-history v-bind:userId="userInfo.id"></view-history>
                </el-tab-pane>
                <el-tab-pane label="我的收藏" name="fourth" style="border: 1px solid lightgray;border-radius: 4px">
                  <myCollections v-bind:userId="userInfo.id"></myCollections>
                </el-tab-pane>
                <el-tab-pane label="我的关注" name="fifth" style="border: 1px solid lightgray;border-radius: 4px">
                  <author-follow v-bind:authorId="userInfo.id"></author-follow>
                </el-tab-pane>
                <el-tab-pane label="我的粉丝" name="sixth" style="border: 1px solid lightgray;border-radius: 4px">
                  <author-fans v-bind:authorId="userInfo.id"></author-fans>
                </el-tab-pane>
              </el-tabs>
          </el-col>
          <el-col :span="5" style="margin-left: 30px;padding-top:50px">
            <div class="right_bar_item">
              <h3>我的热门文章</h3>
              <el-empty description="当前还没有哦~" v-if="myHotArticles.length < 1" style="height: 200px;"></el-empty>
              <p v-for="h in myHotArticles"><el-link type="success" class="right_links" @click="showArticleDetail(h.id,h.user.id)">{{h.title}}</el-link></p>
            </div>
            <div class="right_bar_item">
              <h3>我的最新文章</h3>
              <el-empty description="当前还没有哦~" v-if="myNewArticles.length < 1" style="height: 200px;"></el-empty>
              <p v-for="n in myNewArticles"><el-link type="success" class="right_links" @click="showArticleDetail(n.id,n.user.id)">{{n.title}}</el-link></p>
            </div>
          </el-col>

        </el-row>
    </div>


  </div>
</template>

<script>
import headerTopNav from "@/components/HeaderTop";
import myArticles from "@/components/MyArticles";
import myTags from "@/components/MyTags";
import myCollections from "@/components/MyCollections";
import viewHistory from "@/components/ViewHistory";
import '@/assets/font/iconfont.css'
import AuthorFollow from "@/components/AuthorFollow";
import AuthorFans from "@/components/AuthorFans";
export default {
  components: {headerTopNav,myArticles,myTags,myCollections,viewHistory,AuthorFollow,AuthorFans},
  name: "PersonalCenter",
  data(){
    return {
      imageUrl:this.$Myurl.userImageUrl,
      activeIndex: '4',
      activeName:'first',
      userInfo:JSON.parse(sessionStorage.getItem("userInfo")),
      myHotArticles:[],
      myNewArticles:[],
      modifyFamous:{
        id:'',
        nickName:'',
        avatar:'',
        sex:'',
        description:'',
        tel:'',
        email:'',
        isFamous:""
      },
    }
  },
  methods:{
    modifyIsFamous(){
          let url = "user/modify";
          // console.log(this.modifyInfoForm)
          this.modifyFamous=this.userInfo;
          this.modifyFamous.isFamous="2"
          this.$axios.put(url,this.modifyFamous)
              .then(res=>{
                if (res.data.code == 200){
                  this.$message({
                    type:'success',
                    message:res.data.msg,
                    duration:1000
                  });
                  sessionStorage.setItem("userInfo", JSON.stringify(this.modifyFamous));
                  this.init();
                }else {
                  this.$message({
                    message:res.data.msg,
                    type:"error",
                    duration:1000
                  })
                }
              })
        },

    toPublishArticle() {
      this.$router.push({
        path:'/publishArticle',
      });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    toModifyInfo(){
      this.$router.push("/modifyPersonalInfo")
    },
    getPersonalInfo(){
      let userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
      this.userInfo = userInfo;
      let url = 'user/findUserByKey/'+this.userInfo.id;
      this.$axios.get(url)
          .then(res=>{
            if(res.data.code == 200){
              this.userInfo = res.data.data;
              console.log(this.userInfo)
            }
          })
    },
    showArticleDetail(articleId,authorId){
      this.$router.push({
        path:'/articleDetail',
        query: {
          articleId: articleId,
          authorId: authorId
        }
      });
    },
    getMyHotArticle(){
      let url = 'article/getHotArticleListByAuthorIdAndStatus'
      this.$axios.get(url,{
            params:{
              authorId:this.userInfo.id,
              status:1
            }
          })
          .then(res=>{
            if(res.data.code == 200){
              this.myHotArticles = res.data.data;
            }
          })
    },
    getMyNewArticle(){
      let url = 'article/getNewArticleListByAuthorIdAndStatus'
      this.$axios.get(url,{
        params:{
          authorId:this.userInfo.id,
          status:1
        }
      })
          .then(res=>{
            if(res.data.code == 200){
              this.myNewArticles = res.data.data;
            }
          })
    },
    init(){
      this.getPersonalInfo()
      this.getMyHotArticle()
      this.getMyNewArticle()
    }

  },
  created() {
    this.init()
  }
}
</script>

<style scoped>

  /*.el-tabs__item{*/
  /*  font-size:18px !important;*/
  /*}*/
  .personal_info {
      margin-top: 30px;
      height: 240px;
      border: 1px solid lightgray;
      border-radius: 4px;
  }
  .my_avatar {
      padding: 20px 20px;
  }
  .my_avatar img {
    height: 100px;
    width: 100px;
    border-radius: 50%;
    border: 2px solid lavender;
  }
  .my_nickName{
      color: #000;
      font-size: 26px;
      font-family: "微软雅黑 Light";
      font-weight: bolder;
    width: 60%;
  }
  .contact-way {
    font-size: 30px;
    margin-left: 6px;
  }
  .right_info_box {
    width: 90px;
    height: 90px;
    border: 1px solid lightgray;
    text-align: center;
    border-radius: 6px;
  }
  .right_info_box h4{
    margin:15px 0;
  }
  .right_info_box1 {
    width: 120px;
    height: 40px;
    line-height: 40px;
    border: 1px solid lightgray;
    text-align: center;
    border-radius: 6px;
    letter-spacing: 3px;
  }
  /*.my_article_item{*/
  /*  padding: 0 10px ;*/
  /*}*/
  .my_article_body{
    padding: 0 10px;
    border-radius: 4px;
  }
  .my_article_body h3{
    padding: 8px 20px;
    margin: 0;
    border-bottom: 1px solid lightgray;
  }
  .my_article_description {
    padding: 8px 20px;
    height: 80px;
    margin: 0;
  }
  .my_article_bottom {
    padding: 3px 20px;
    border-top: 1px solid lightgray;
    line-height: normal;
  }
  .my_article_bottom i:not(:first-child) {
    margin-left: 30px;
  }
  .article_detail:hover {
    /*text-underline:#5bc65b;*/
    text-decoration: underline;
    cursor: pointer;
    color: #f1da7f;;
  }

  .right_bar_item{
    height: 300px;
    background-color: #f9fafc;
    border-radius: 4px;
    border: 1px solid lightgray;
    margin-bottom: 20px;
    text-align: center;
  }
  .right_bar_item h3{
    text-align: left;
    margin-left: 20px;
  }

  .right_links {
    font-size: 18px;
  }
  .right_info_box1:hover {
    cursor: pointer;
    background-color: #f4f3f3;
  }

</style>